<template>
  <section class="content clear">
    <section class="content-search">
      <div class="fl">
        选择时间 <el-date-picker size="mini" v-model="sear.date" type="daterange" placeholder="选择时间"></el-date-picker>
      </div>
      <div class="fl ml20">
        操作模块 <el-select size="mini" v-model="sear.module" clearable placeholder="请选择模块"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select>
      </div>
      <div class="fl ml20">
        <el-input size="mini" v-model="sear.filterValue" placeholder="请输入操作人姓名/学工号"></el-input>
      </div>
      <div class="fl ml20">
        <el-button size="mini" type="primary" @click="search">搜索</el-button>
      </div>
    </section>
    <section class="content-list">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">
            {{scope.$index + 1 + page.size * (page.current - 1)}}
          </template>
        </el-table-column>
        <el-table-column prop="operatorName" label="操作人" width="180"></el-table-column>
        <el-table-column prop="roleName" label="岗位" width="180"></el-table-column>
        <el-table-column prop="operateTime" label="时间">
          <template slot-scope="scope">
            {{scope.row.operateTime | moment("YYYY-MM-DD HH:mm:ss")}}
          </template>
        </el-table-column>
        <el-table-column prop="module" label="模块名称"></el-table-column>
        <el-table-column prop="detail" label="详细"></el-table-column>
      </el-table>
    </section>
    <section class="content-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </section>
  </section>
</template>

<script>
import { integrate } from '@/api/index'
export default {
  name: 'log',
  data () {
    return {
      currentPage: 1,
      sear: {
        date: '',
        module: '',
        filterValue: ''
      },
      page: {
        current: 1,
        total: 0,
        size: 10
      },
      options: [{
        value: '人员管理',
        label: '人员管理'
      }, {
        value: '岗位管理',
        label: '岗位管理'
      }, {
        value: '综合管理',
        label: '综合管理'
      }],
      tableData: []
    }
  },
  created () {
    this.getLogList(1)
  },
  methods: {
    getLogList (val) {
      let req = {
        pageNum: val,
        pageSize: this.page.size,
        startTime: this.sear.date ? this.sear.date[0] : '',
        endTime: this.sear.date ? this.sear.date[1] : '',
        filterValue: this.sear.filterValue,
        module: this.sear.module
      }
      integrate()._getLogList(req).then((res) => {
        if (res.status) {
          this.tableData.length = 0
          this.tableData = res.data.pageData
          this.page.total = res.data.totalCount
        }
      })
    },
    search () {
      this.getLogList(1)
      this.page.current = 1
    },
    handleSizeChange (val) {
      this.page.size = val
      this.getLogList(1)
    },
    handleCurrentChange (val) {
      this.page.current = val
      this.getLogList(val)
    }
  }
}
</script>
